<template>
  <div class="analyse">
    <div class="analyseAll">
      <!-- 返回 -->
      <div class="topTitle">
        <el-page-header :content="'数据分析：'+scopes.title" @back="navBack" />
      </div>
      <!-- 考试描述 -->
      <div class="analyseBottom">
        <div class="Bottoms">
          <div>总分: {{ scopes.scores }}</div>
        </div>
        <div class="bottomsa">
          <div>通过分数: {{ scopes.pastscores }}</div>
        </div>
        <div class="bottomsb">
          <div>考试时长: 0分种</div>
        </div>
        <div class="bottomsc">
          <div>考试时间: 时间不限</div>
        </div>
      </div>
    </div>
    <!-- 统计图 -->
    <div class="chart">
      <div id="main" style="width: 350px;height: 350px;"></div>
      <div id="mains" style="width: 60%;height: 350px;"></div>
    </div>
    <!-- 查询 -->
    <div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="学员统计" name="first">
          <el-form :inline="true" class="demo-form-inline inquire">
            <el-form-item label="学员姓名">
              <el-input v-model="formInline.key" placeholder="考试名称" />
            </el-form-item>
            <el-form-item label="部门">
              <div class="example-block">
                <el-cascader :options="options" :props="{ label: 'name', value: 'id' }" @change="depChange" />
              </div>
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="formInline.classid" placeholder="请选择" @change="classChange" clearable>

                <el-option :label="item.name" :value="item.id" v-for="(item, index) in classList" :key="index" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态" class="qq4">
              <el-select v-model="formInline.state" placeholder="请选择" clearable>
                <el-option label="所有" value="0" />
                <el-option label="通过" value="1" />
                <el-option label="未通过" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button>导出</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

      </el-tabs>
    </div>
    <!-- 表格 -->
    <div class="inquire">
      <el-table :data="stuList" style="width: 100%;">
        <el-table-column prop="name" label="学员姓名" />
        <el-table-column prop="depname" label="部门" />
        <el-table-column prop="classname" label="班级" />
        <el-table-column prop="scores" label="分数" />
        <el-table-column label="通过情况" #default="scope">

          <el-link type="primary" v-if="scope.row.scores >= scopes.pastscores" :underline="false">通过</el-link>
          <el-link type="danger" v-if="scope.row.scores <= scopes.pastscores" :underline="false">未通过</el-link>
        </el-table-column>
        <el-table-column prop="scores" label="用时" />
        <el-table-column prop="stuBeginTime" label="考试时间" />
        <el-table-column prop="stuEndTime" label="交卷时间" />
        <el-table-column label="操作" #default="scope">
          <el-link type="primary" @click="ctch(scope.row.id, testid)">查看</el-link>
        </el-table-column>
      </el-table>
    </div>
    <Examine :table="table" @updaDialog="updaDialog" :testids="testIDs" :studentId="studentId"></Examine>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, onMounted, ref, provide } from 'vue'
// 抽屉
import Examine from '../../components/test/Examine.vue';
import { useRouter, useRoute } from "vue-router";
import * as echarts from 'echarts';
import type { TabsPaneContext } from 'element-plus'
import { studentList, testList, Department, Classes } from '../../apis/test/test';
const tableData: any = reactive({ stuList: [], scopes: {}, options: [], classList: [], statistics: {}, fractional: [], people: [] })
const { options,stuList,classList,statistics,scopes } = toRefs(tableData)
const route = useRoute();
const router = useRouter()
const testid = ref(route.query.testid);
const table = ref(false)
const studentId = ref()
const testIDs = ref()
const updaDialog = (val: any) => {
  table.value = val
}
const ctch = (val: any, testid: any) => {
  table.value = true
  // console.log(val);
  // console.log(testid);

  studentId.value = val
  testIDs.value = testid
}
// 返回上一级页面
const navBack = () => {
  router.back()
}
const formInline = reactive({
  key: '',
  depid: '',
  classid: '',
  state: ''
})
// 获取班级列表
const getclassesList = async (id: any) => {
  const res: any = await Classes( id );
  console.log(res);
  if (res.errCode == 10000) {
    classList.value = res.data.list;
  }
}
// 班级改变事件
const classChange = (val: any) => {
  formInline.classid = val
}
// 部门内容改变事件
const depChange = (val: any) => {
  formInline.depid = val.slice(-1)[0];
  getclassesList(formInline.depid)
}
// 获取考试分析统计
const gettestList = async () => {
  const res: any = await testList({ testid: testid.value });
  const fractional = [];
  const people = []
  if (res.errCode == 10000) {
    let passCount = {}
    passCount = res.data.passCounts
    scopes.value = res.data.model
    statistics.value = res.data.pieItems
    for (const key in statistics.value) {
      people.push(statistics.value[key])// ------属性值
      fractional.push(key)	// ------属性
    }
    statistical(fractional, people)
    circular(passCount)
  }
}
gettestList()
// 部门列表
const getDepartmentList = async () => {
  const res: any = await Department();
  if (res.errCode == 10000) {
    options.value = res.data.list
  }
}
getDepartmentList()
// 考试人数列表
const getStudentList = async () => {
  const res: any = await studentList({ testid: testid.value, ...formInline });
  if (res.errCode == 10000) {
    stuList.value = res.data.list
  }
}
getStudentList()
// 查询
const onSubmit = () => {
  getStudentList()
}
type EChartsOption = echarts.EChartsOption;
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
// 圆形图
const circular = (passCount: any) => {
  var chartDom = document.getElementById('main')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '考试情况',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 0, name: 'Search Engine' },
          { value: passCount.pass, name: '通过' },
          { value: 0, name: 'Email' },
          { value: passCount.unpass, name: '未通过' },
          { value: 0, name: 'Video Ads' }
        ]
      }
    ]
  };
  option && myChart.setOption(option);
  // 屏幕宽度高度自适应
  window.onresize = function() {
      myChart.resize();
    };
}
// 统计图
const statistical = (fractional: any, people: any) => {
  var chartDom = document.getElementById('mains')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    xAxis: {
      type: 'category',
      data: fractional
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: people,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };
  option && myChart.setOption(option);
  // 屏幕宽度高度自适应
  window.onresize = function() {
      myChart.resize();
    };
}
// 页面挂载
onMounted(() => {
})

</script>
 
<style lang = "less" scoped>
@import url('../../static/css/test/Analyse.css');
</style>